<template>
  <!-- 表单组件 -->
  <div>
    <table align="center" width="100%" class="table" border="0">
      <tbody>
        <tr class="tHead">
          <th :style="{ width: item.width || 'auto' }" v-for="item in columns" :key="item.key">
            <div class="col">
              {{ item.title }}
              <uiFilter v-if="item.filters && refresh" :item="item" :refresh="refresh" @handleFilter="handleFilter" />
              <uiSort v-if="item.sort && refresh" :refresh="refresh" :item="item" @handleSort="handleSort" />
            </div>
          </th>
        </tr>
        <tr class="tContent" v-for="(item, index) in tableDatas" :key="index" :class="{ stripe: index % 2 }">
          <td class="item" v-for="col in columns" :key="col.key">
            {{col.cusText?col.cusText[item[col.key]]: item[col.key] }}
            
          </td>


          <!-- <td class="item">{{ item.name }}</td>
          <td class="item">{{ item.phone }}</td>
          <td class="item">{{ { 'male': '男', 'female': '女' }[item.sex] }}</td>
          <td class="item">{{ item.id }}</td>
          <td class="item">{{ item.start_date }}</td>
          <td class="item">{{ item.end_date }}</td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import uiFilter from './filter.vue'
import uiSort from './sort.vue'
import _ from 'lodash'

////实际项目中，公共方法可单独封装起来提高复用率
const dateSort = (key, type) => {
  return (a, b) => {
    let value1 = a[key];
    let value2 = b[key];
    if (type === '1') {
      // 升序
      return Date.parse(value1) - Date.parse(value2);
    } else {
      // 降序
      return Date.parse(value2) - Date.parse(value1)
    }
  }
}
const sortByDate = (list, key, type) => {
  if (type === '0' || type === 0) {
    return list
  }
  if (type === '1' || type === 1) { //升序
    return list.sort(dateSort(key, '1'))
  }
  if (type === '2' || type === 2) { //降序
    return list.sort(dateSort(key, '2'))
  }
}
const setData = (orData, filterC, sortC) => {
  let arr = []
  if (!Object.keys(filterC).length) {
    arr = orData
  }
  if (Object.keys(filterC).length) { //筛选
    arr = orData.filter(item => {
      let isShow = Object.keys(filterC).every((key) => {
        let value = filterC[key];
        return value.length ? item.hasOwnProperty(key) && value.includes(item[key]) : true;
      })
      return isShow; 
    })
  }
  if (Object.keys(sortC).length) { //排序
    const oData = _.cloneDeep(arr)
    for (const key in sortC) {
      arr= sortByDate(oData, key, sortC[key])
    }
  }
  return arr
}
const filterCon = {};
const sortCon = {};
export default {
  name: "uiTable",
  components: {
    uiFilter, uiSort
  },
  props: {
    data: {
      type: Array,
      default: () => { return [] }
    },
    columns: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      orData: [],
      tableDatas: [],
      refresh: true,
    }
  },
  created() {
    // this.tableDatas = this.data
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.tableDatas = [...newVal]
        this.refresh = false
        this.$nextTick(() => {
          this.refresh = true
        })
      },
      // immediate: true
    }
  },
  methods: {
    //表格筛选
    handleFilter(payLoad) {
      const { key, value } = payLoad
      filterCon[key] = value
      this.$emit('handleFilter', sortCon)
      //如需远程筛选，可在columns增加配置项，在此增加条件判断
      this.tableDatas = setData(this.data, filterCon, sortCon)
    },
    //表格排序
    handleSort(payLoad) {
      const { key, value } = payLoad
      sortCon[key] = value
      this.$emit('handleSort', filterCon)
       //如需远程筛选，可在columns增加配置项，在此增加条件判断
      this.tableDatas = setData(this.data, filterCon, sortCon)
    }
  }
}
</script>
<style scoped lang="less">
.table {
  width: 100%;
  border-collapse: collapse;
  /* border-spacing: 0; */
  border: 1px solid #cecece;

}

th,
td {
  border: 1px solid #cecece;
}

.tHead {
  background-color: #eee2d1;
  height: 32px;

  .col {
    font-size: 9px;
    font-weight: 100;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }


}

.tContent {
  font-size: 9px;
  font-weight: 100;
}

.stripe {
  background-color: #f9f5f0;
}

.table>tbody>tr>td {
  text-align: center;
  height: 28px;
}
</style>

